<template>
  <div v-if="!loading" class="order-info">
    <t-drawer
      size="50%"
      :visible.sync="visible"
      @confirm="onConfirm"
      :footer="false"
      :confirmOnEnter="true"
      :onClose="close"
    >
      <template #header>
        <div  class="head">
          <div class="flex align-center justify-between">
            <div class="head-left">
              <div class="file-icon">
                <i class="iconfont icon-dingdanjihe"></i>
              </div>
              <div>
                <p>采购订单</p>
                <p class="order-no">订单编号：{{ info.order_no }}</p>
              </div>
            </div>
            <div class="head-right">
              <t-space size="8px">
                <!--affirm：订单确认-->
                <option-confirm :info="info" @refresh="getOrderDetail"></option-confirm>
                <!--address：改地址-->
                <option-address :info="info" @refresh="getOrderDetail"></option-address>
                <!--fee：改价-->
                <option-fee :info="info" @refresh="getOrderDetail"></option-fee>
                <!--remark：改备注-->
                <option-remark :info="info" @refresh="getOrderDetail"></option-remark>
                <!--send_delivery：出库并发货-->
                <!--refund：退款-->
                <option-refund :info="info" @refresh="getOrderDetail"></option-refund>
              </t-space>
            </div>
          </div>
          <div class="base-info">
            <div>
              <p class="hint-title">订单状态</p>
              <t-tag v-if="info.order_status === -1" theme="default" variant="outline">已取消</t-tag>
              <t-tag v-if="info.order_status === 1" theme="success" variant="outline">已完成</t-tag>
              <t-tag v-if="info.order_status === 2" theme="warning" variant="outline">待付款</t-tag>
              <t-tag v-if="info.order_status === 3" theme="warning" variant="outline">待确认</t-tag>
              <t-tag v-if="info.order_status === 4" theme="warning" variant="outline">待发货</t-tag>
              <t-tag v-if="info.order_status === 5" theme="warning" variant="outline">待收货</t-tag>
            </div>
            <div>
              <p class="hint-title">支付金额</p>
              <p>￥{{ info.pay_produce }}</p>
            </div>
            <div v-if="info.pay && info.pay.length">
              <p class="hint-title">支付时间</p>
              <p>{{ info.pay[info.pay.length - 1].creation_time }}</p>
            </div>
          </div>
        </div>
      </template>
      <t-tabs v-model="value" theme="card">
        <t-tab-panel value="base" label="订单信息">
          <order-info ref="base" :info="info"></order-info>
        </t-tab-panel>
        <t-tab-panel value="product" label="商品信息">
          <product-list ref="product" :info="info" @select="handleSelect" @send="handleSend"></product-list>
        </t-tab-panel>
        <t-tab-panel value="record" label="订单日志">
          <order-record ref="record" :info="info"></order-record>
        </t-tab-panel>
        <t-tab-panel value="pay" label="支付流水">
          <pay-history ref="pay" :info="info"></pay-history>
        </t-tab-panel>
      </t-tabs>
    </t-drawer >


    <!-- 发货 -->
    <order-send ref="send" :info="info" @refresh="getOrderDetail"></order-send>
    <!-- 选择商品 -->
    <select-product ref="select" @select="handleChangeSelect"></select-product>
  </div>
</template>

<script>
import OrderInfo from "@/pages/order/purchase-list/components/order-info.vue";
import ProductList from "@/pages/order/purchase-list/components/product-list.vue";
import SelectProduct from "@/pages/order/purchase-list/components/select-product.vue";
import OrderRecord from "@/pages/order/purchase-list/components/order-record.vue";
import OrderRemark from "@/pages/order/purchase-list/components/order-remark.vue";
import OrderSend from "@/pages/order/purchase-list/components/order-send.vue";
import {agentOrderDetailsApi, agentOrderFeeApi} from "@/api/order";
import OptionConfirm from "@/pages/order/purchase-list/components/option-confirm.vue";
import OptionAddress from "@/pages/order/purchase-list/components/option-address.vue";
import OptionFee from "@/pages/order/purchase-list/components/option-fee.vue";
import OptionRemark from "@/pages/order/purchase-list/components/option-remark.vue";
import OptionRefund from "@/pages/order/purchase-list/components/option-refund.vue";
import PayHistory from "@/pages/order/purchase-list/components/pay-history.vue";

export default {
  name: "OrderDetail",
  components: {
    PayHistory,
    OptionRefund,
    OptionRemark,
    OptionFee,
    OptionAddress, OptionConfirm, OrderSend, OrderRemark, OrderRecord, SelectProduct, ProductList, OrderInfo},
  data() {
    return {
      visible: false,
      value: 'base',

      orderId: '', // 订单id
      info: {}, //


      formVisible: false,
      formData: {
        deposit_fee: '', // number 可选订金(首付款)（两位小数）（pay_type==1时）（空值不改动）
        pay_produce: '', // number 可选需付商品总费用（pay_type==1时包含订金）（两位小数）（空值不改动）
        admin_remarkstring: '', // 可选管理订单备注（空值不改动）
      },
      rules: {
        pay_produce: [
          { required: true, message: '请输入实收', type: 'error' },
        ],
      },
      loading: false
    }
  },
  methods: {
    onConfirm(context) {
      this.visible = false;
    },
    getOrderDetail() {
      agentOrderDetailsApi(this.orderId).then((res) => {
        this.info = res.data
        this.info.product = res.data.product.map(item=> ({
          ...item,
          type: 'product',
          relation: item.relation.map(el=> ({...el, type: 'relation', p_product_id: item.product_id, quantity: item.quantity, total_price: el.product_price * item.quantity, count: 0, selectList: []})),
          count: 0,
          selectList: []
        }))
      }).catch(err=> {
        console.log('err', err)
      }).finally(()=> {
        this.loading = false
      })
    },
    open(row) {
      this.value = 'base'
      this.orderId = row.id
      this.loading = true
      this.visible = true
      this.formData = {
        deposit_fee: '', // number 可选订金(首付款)（两位小数）（pay_type==1时）（空值不改动）
        pay_produce: '', // number 可选需付商品总费用（pay_type==1时包含订金）（两位小数）（空值不改动）
        admin_remarkstring: '', // 可选管理订单备注（空值不改动）
      }
      this.getOrderDetail()
    },
    close(context) {
      this.visible = false
    },
    // 选中
    handleSend(lists) {
      this.$refs.send.open(lists)
    },
    // 选择商品
    handleSelect(row) {
      this.$refs.select.open(row)
    },
    // 选择产品回调
    handleChangeSelect(data) {
      this.$refs.product.changeSelect(data)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .t-tabs__nav-container.t-is-top::after {
  //background-color: transparent;
}

/deep/ .t-drawer__body {
  //padding-left: 0;
  //padding-right: 0;
  padding: 0;
  //background-color: #E5E5E5;
}

  .order-info {


    .head {
      width: 100%;
      padding: var(--td-comp-paddingTB-l) 0;

      .head-left {
        display: flex;
        align-items: center;

        .file-icon {
          width: 60px;
          height: 60px;
          border-radius: var(--td-radius-medium);
          background-color: var(--td-brand-color);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: var(--td-comp-paddingLR-l);

          .iconfont {
            font-size: 36px;
            color: white;
          }
        }

        .order-no {
          font-size: 14px;
          font-weight: 400;
          color: rgba(0,0,0,.7);
        }
      }

      .base-info {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        //display: flex;
        //align-items: center;
        //justify-content: space-between;
        margin-top: var(--td-comp-paddingTB-l);

        .hint-title {
          color: rgba(0,0,0,.7);
        }

        p {
          font-size: 14px;
          font-weight: 400;
          color: black;
        }
      }
    }
  }
</style>
